<template>
	<view>
		<view class="setup">
			<view class="d-b-c setup_item">
				<view class="">账号与安全</view>
				<view class="d-s-c">
					<view class="mr20">{{ account }}</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
			<view class="d-b-c setup_item">
				<view class="">帮助与反馈</view>
				<view class="">
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
		</view>
		<view class="setup">
			<view class="d-b-c setup_item">
				<view class="">发音类型</view>
				<view class="d-s-c" @click="fshow = true">
					<view class="mr20">{{ fname }}</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
		</view>
		<!-- <view class="setup">
			<view class="d-b-c setup_item">
				<view class="">测试类型</view>
				<view class="d-s-c" @click="tshow = true">
					<view class="mr20">{{ tname }}</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- 发音选择 -->
		<template>
			<u-select v-model="fshow" mode="single-column" :list="flist" @confirm="confirm"></u-select>
		</template>
		<!-- 测试选择 -->
		<template>
			<u-select v-model="tshow" mode="single-column" :list="tlist" @confirm="testConfirm"></u-select>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				fvoice: 'RP',
				fname: '英式',
				fshow: false,
				flist: [
					{value: 'RP', label: '英式'},
					{value: 'GA', label: '美式'}
				],
				tvalue: 1,
				tname: '顺序',
				tshow: false,
				tlist: [
					{value: '1', label: '顺序'},
					{value: '2', label: '随机'}
				],
			}
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				const userInfo = this.$store.state.userInfo
				this.account = userInfo.mobile
				this.fvoice = this.$store.state.voiceType
				this.fname = this.$store.state.voiceType == 'RP' ? '英式' : '美式'
				this.tvalue = this.$store.state.testType
				this.tname = this.$store.state.testType == 1 ? '顺序' : '随机'
			}
		},
		methods: {
			confirm(e) {
				// console.log(e[0].label);
				this.fvoice = e[0].value
				this.fname = e[0].label
				this.$store.dispatch('voiceType', e[0].value)
			},
			testConfirm(e) {
				this.tvalue = e[0].value
				this.tname = e[0].label
				this.$store.dispatch('testType', e[0].value)
			},
		}
	}
</script>

<style>
	.setup {
		margin: 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.setup_item {
		padding: 40rpx 30rpx;
	}
</style>
